<template>
  <q-tr
    class="cloud-file-item"
    :props="file"
    @click.native.stop="selFile($event, file.row)"
    @dblclick.native.stop="dblclickE(file.row)"
    :class="{ active: isActive }"
    @contextmenu.native.stop.prevent="
      showMenu($event, 'menu' + file.row.index, file.row)
    "
  >
    <q-td key="label" :props="file">
      <q-icon
        class="vertical-middle"
        v-if="file.row.isFile"
        :name="
          file.row.type === 'machine'
            ? 'img:statics/svg/' + +'machine1.svg'
            : 'img:statics/svg/' + file.row.type + '.svg'
        "
        style="font-size:18px;"
      />
      <q-icon
        class="vertical-middle"
        v-else
        name="img:statics/svg/file-icon.svg"
        style="font-size:18px;"
      />
      <div
        class="file-sign"
        v-if="file.row.isFile && isShowDui && file.row.transferableFlag"
      >
        <q-icon class="file-sign-svg" name="img:statics/img/pair.svg" />
      </div>
      <span v-if="!edit" class="margin-l-10 name ellipsis">
        {{ file.row.label }}
        <q-tooltip :delay="1000">{{ file.row.label }}</q-tooltip>
      </span>
      <q-input
        class="margin-l-10 name renameInput"
        :class="{ hidden: !edit }"
        v-model.trim="rename"
        dense
        outlined
        :ref="'renameInput2' + file.row.id"
        @keyup.enter="reNameBlur($event)"
        @blur="setNewNameFun($event, file.row)"
      />
    </q-td>
    <q-td key="size" :props="file">{{
      file.row.isFile ? sizeFormat(file.row.size) : "—"
    }}</q-td>
    <q-td key="timestamp" :props="file">
      <div v-if="!isSearch">{{ file.row.timestamp | toTime }}</div>
      <q-btn
        flat
        v-else
        color="primary"
        class="table-flat-btn"
        @click="goToFile(file.row)"
      >
        <div style="width: 200px" class="text-ellipsis">
          {{ file.row.name }}
          <q-tooltip>{{ file.row.name }}</q-tooltip>
        </div>
      </q-btn>
    </q-td>
    <q-menu
      :ref="'menu' + file.row.index"
      touch-position
      context-menu
      no-parent-event
    >
      <q-list dense style="min-width: 150px">
        <q-item
          clickable
          v-close-popup
          v-if="!file.row.isFile"
          @click="dblclickE(file.row)"
        >
          <q-item-section>打开下一级</q-item-section>
        </q-item>
        <q-item
          clickable
          v-close-popup
          v-if="!(!file.isFile && file.source === 'cloud')"
          @click="renameFun(file.row)"
        >
          <q-item-section>重命名</q-item-section>
        </q-item>
        <q-item
          clickable
          v-close-popup
          v-if="isShowAdd && file.row.isFile && file.source !== 'machine'"
          @click="addCompareList(file.row)"
        >
          <q-item-section>加入对比列表</q-item-section>
        </q-item>
        <q-item
          clickable
          v-close-popup
          v-if="file.row.isFile && file.row.source === 'cloud'"
          @click="showVersionList(file.row)"
        >
          <q-item-section>版本履历</q-item-section>
        </q-item>
        <q-item
          clickable
          v-close-popup
          v-if="file.row.isFile"
          @click="editFile(file.row)"
        >
          <q-item-section>编辑</q-item-section>
        </q-item>
        <q-item
          clickable
          v-close-popup
          @click="deleteFun(file.row)"
          v-has="{ id: Enums.SYS_PERMISSION.G_DELETE_BTN.value }"
        >
          <q-item-section>删除</q-item-section>
        </q-item>
        <q-item
          clickable
          v-close-popup
          v-if="file.row.isFile && isTranFlag"
          @click="signFile(file.row)"
        >
          <q-item-section>{{
            file.row.transferableFlag ? "取消标记" : "标记"
          }}</q-item-section>
        </q-item>
      </q-list>
    </q-menu>
  </q-tr>
</template>

<script>
// import { date } from 'quasar'
import { isUploadFile, sizeFormat } from 'src/assets/js/util'
import _ from 'lodash'
export default {
  name: 'file-item-tr',
  props: {
    file: {
      type: Object
    },
    isActive: {
      type: Boolean,
      default: false
    },
    isSearch: {
      // 是否是搜索页面
      type: Boolean,
      default: false
    },
    isShowAdd: {
      type: Boolean,
      default: true
    },
    isShowDui: {
      type: Boolean,
      default: true
    },
    isTranFlag: {
      // 该人是否有标记权限
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      edit: false, // 是否是编辑转状态
      rename: '' // 重命名的暂存名字
    }
  },
  methods: {
    // 选择文件
    selFile (event, file) {
      this.$emit('selFiles', event, file)
    },
    // 双击文件
    dblclickE (file) {
      this.$emit('dblclickE', file)
    },
    // 右键展示菜单
    showMenu (event, ref, file) {
      this.$refs[ref].show(event)
      this.$emit('setFile', file)
    },
    // 重命名
    renameFun (file) {
      this.rename = file.label
      this.edit = true
      // 设置选中区域
      this.$nextTick(() => {
        const input = this.$refs['renameInput2' + file.id]
        const dominput =
          input.constructor === Array
            ? input[0].$refs.input
            : input.$refs.input
        const endPos = this.getTxtPos(file.label)
        if (dominput.setSelectionRange) {
          dominput.focus()
          dominput.setSelectionRange(0, endPos)
        } else if (dominput.createTextRange) {
          var range = dominput.createTextRange
          range.collapse(true)
          range.moveStart('character', 0)
          range.moveEnd('character', endPos)
          range.select()
        }
      })
    },
    // 重命名回车
    reNameBlur (event) {
      event.target.blur()
    },
    // 重命名失去焦点,真正去重命名
    setNewNameFun (event, file) {
      event.preventDefault()
      // 如果名字没有变化，就这样了
      if (this.file.row.label === this.rename) {
        this.edit = false
        return
      }
      if (_.isEmpty(this.rename)) {
        this.noticeMessage('名称不能为空')
        this.edit = false
        return
      }
      if (this.rename.length > 20) {
        this.noticeMessage('名称长度不能为超过20')
        this.edit = false
        return
      }
      if (isUploadFile(this.rename)) {
        this.noticeMessage('名称不规范,请重试')
        this.edit = false
        return
      }
      this.$emit('setNewNameFun', file, this.rename)
    },
    // 获取选中区域的终止位置
    getTxtPos (label) {
      let txtArr = label.split('.')
      if (txtArr.length === 1) {
        return label.length
      }
      const lastLength = txtArr[txtArr.length - 1].length
      return label.length - lastLength - 1
    },
    // 加入对比列表
    addCompareList (file) {
      this.$emit('addCompareList', file)
    },
    signFile (val) {
      this.$emit('signFile', val)
    },
    // 显示版本履历
    showVersionList (file) {
      this.$emit('showVersionList', file)
    },
    // 编辑文件
    editFile (file) {
      this.$emit('editFile', file)
    },
    // 删除
    deleteFun (file) {
      this.$emit('deleteFun', file)
    },
    goToFile (file) {
      this.$emit('goToFile', file)
    },
    // 提示
    // 注意提示
    noticeMessage (message) {
      this.$message.warning(message)
    },
    // 时间格式化
    // dateFormat (timestamp) {
    //   return date.formatDate(timestamp, 'YYYY-MM-DD HH:mm')
    // },
    // 文件大小格式化
    sizeFormat (size) {
      return sizeFormat(size)
    }
  }
}
</script>

<style scoped lang="stylus">
.cloud-file-item{
  &.active{
    background-color rgba(95,119,253, 0.2)
  }
  .name{
    display inline-block
    width 350px
    vertical-align middle
  }
  .file-sign{
    position absolute
    top 3px
    left 15px
    &-svg{
      opacity 0.8
      font-size 12px
    }
  }
  .renameInput{
    background-color #fff
  }
}
</style>
